<template>
	<view>
		<uni-popup ref="popupTipsRef">
			<view class="popup-tips-layout">
				<view class="popup-tips-top">
					<view class="popup-tips-title">{{title}}</view>
					<view class="popup-tips-content" v-if="!isTextarea">{{content}}</view>
					<view class="textarea-layout" v-else>
						<textarea v-model="textValue" :maxlength="50" :placeholder="content" />
					</view>
				</view>
				<view class="popup-tips-bottom" v-if="!isCallback" @tap="submit">{{submitText}}</view>
				<view class="popup-tips-bottom-cllBack" v-else>
					<view class="popup-tips-bottom-block" @tap="handleLeft">{{cancel}}</view>
					<view class="popup-tips-bottom-block blue" @tap="handleRight">{{confirm}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted } from 'vue'

  const emit = defineEmits(['popupTipsOk','popupTipsCancel'])
	const props = defineProps({
		title:{
      type: String,
      default: '温馨提示'
    },
    content:{
      type: String,
      default: ''
    },
    contentColor:{
      type: String,
      default: '#333333'
    },
    isCallback:{
      type: Boolean,
      default: false
    },
    submitText:{
      type: String,
      default: '我知道了'
    },
    cancel:{
      type: String,
      default: '取消'
    },
    confirm:{
      type: String,
      default: '确认'
    },
    isTextarea:{
      type: Boolean,
      default: false
    }
	})

  const popupTipsRef = ref(null) 
  const textValue = ref('')
		
  const open = () => {
    popupTipsRef.value.open('center');
  }
  const close = () => {
    textValue.value = ''
    popupTipsRef.value.close();
  }
  
  const submit = () => {
    popupTipsRef.value.close();
  }

  const handleLeft = () => {
    let data = null;
    if(props.isTextarea){
      data = textValue.value
    }
    emit('popupTipsCancel',data)
  }
  const handleRight = () => {
    let data = null;
    if(props.isTextarea){
      data = textValue.value
    }
    emit('popupTipsOk',data)
  }

  defineExpose({
		open,close
	})

</script>

<style lang="scss" scoped>
	.popup-tips-layout {
		width: 596rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.popup-tips-top {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 24rpx;
			box-sizing: border-box;
      font-size: 28rpx;
      color: #666666;

			.popup-tips-title {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
				margin-bottom: 16rpx;
			}

      .popup-tips-content{
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        margin-top: 20rpx;
      }
			
			.textarea-layout{
				width: 100%;
				border-radius: 5rpx;
				
				
				textarea{
          width: 100%;
          height: 234rpx;
					padding: 15rpx 20rpx;
					box-sizing: border-box;
          background: #F4F3F7;
				}

        ::v-deep .textarea-placeholder{
          font-weight: 400;
          font-size: 24rpx;
          color: #A9A7B3;
        }
        
			}
      
		}
		.popup-tips-bottom {
      width: 100%;
      height: 88rpx;
      font-size: 30rpx;
      color: #12b8d7;
			/* box-shadow: inset 0rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1); */
			@include flex(row,center, center);
		}
		
		.popup-tips-bottom-cllBack{
      width: 374rpx;
      height: 104rpx;
			margin: auto;
      @include flex(row,space-between,flex-start);


			.popup-tips-bottom-block{
        width: 172rpx;
        height: 64rpx;
        border-radius: 32rpx;
        border: 2rpx solid #ADADAD;
				@include flex(row);
        font-weight: 400;
        font-size: 24rpx;
        color: #ADADAD;
        box-sizing: border-box;
			}
			.blue{
        background: #16DFF2;
        color: #FFFFFF;
        border: none;
			}
		}
	
	}
</style>